<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>公司管理架构</title>

	<!-- Sets the basepath for the library if not in same directory -->
	<script type="text/javascript">
		mxBasePath = '/Public/Js/mxgraph/src';
	</script>
	<!-- Loads and initializes the library -->
	<script src="/Public/Admin/bootstrap/js/jquery.min.js"></script>
	<div>
    <div>
    <section>
    <include file="Public:script" />
    <script src="/Public/Js/mxgraph/mxClient.js"></script>
    <!-- Example code -->
    <script type="text/javascript">
		// Makes the shadow brighter
		mxConstants.SHADOWCOLOR = '#65CEA7';
		
		// Program starts here. Creates a sample graph in the
		// DOM node with the specified ID. This function is invoked
		// from the onLoad event handler of the document (see below).
		function main()
		{
			// Checks if browser is supported
			if (!mxClient.isBrowserSupported())
			{	
				// Displays an error message if the browser is
				// not supported.
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
				// Workaround for Internet Explorer ignoring certain styles
				var container = document.createElement('div');
				container.style.position = 'absolute';
				container.style.overflow = 'hidden';
				container.style.left = '0px';
				container.style.top = '0px';
				container.style.right = '0px';
				container.style.bottom = '0px';

				var outline = document.getElementById('outlineContainer');

				mxEvent.disableContextMenu(container);

				if (mxClient.IS_QUIRKS)
				{
					document.body.style.overflow = 'hidden';
					new mxDivResizer(container);
					new mxDivResizer(outline);
				}

				// Sets a gradient background
			    if (mxClient.IS_GC || mxClient.IS_SF)
			    {
			    	container.style.background = '#ffffff';
			    }
			    else if (mxClient.IS_NS)
			    {
			    	container.style.background = '#ffffff';  
			    }
			    else if (mxClient.IS_IE)
			    {
			    	container.style.filter = 'progid:DXImageTransform.Microsoft.Gradient('+
			                'StartColorStr=\'#FFFFFF\', EndColorStr=\'#E7E7E7\', GradientType=0)';
			    }

				document.body.appendChild(container);

				// Creates the graph inside the given container
				var graph = new mxGraph(container);
				
				// Enables automatic sizing for vertices after editing and
				// panning by using the left mouse button.
				graph.setCellsMovable(false);
				graph.setAutoSizeCells(true);
				graph.setPanning(true);
				graph.panningHandler.useLeftButtonForPanning = true;

				// Displays a popupmenu when the user clicks
				// on a cell (using the left mouse button) but
				// do not select the cell when the popup menu
				// is displayed
				graph.panningHandler.selectOnPopup = false;

				// Creates the outline (navigator, overview) for moving
				// around the graph in the top, right corner of the window.
				var outln = new mxOutline(graph, outline);
				
				// Disables tooltips on touch devices
				graph.setTooltips(!mxClient.IS_TOUCH);

				// Set some stylesheet options for the visual appearance of vertices
				var style = graph.getStylesheet().getDefaultVertexStyle();
				style[mxConstants.STYLE_SHAPE] = 'label';
				
				style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
				style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
				style[mxConstants.STYLE_SPACING_LEFT] = 54;
				
				style[mxConstants.STYLE_GRADIENTCOLOR] = '#65CEA7';
				style[mxConstants.STYLE_STROKECOLOR] = '#65CEA7';
				style[mxConstants.STYLE_FILLCOLOR] = '#65CEA7';
				
				style[mxConstants.STYLE_FONTCOLOR] = '#fff';
				style[mxConstants.STYLE_FONTFAMILY] = '微软雅黑';
				style[mxConstants.STYLE_FONTSIZE] = '12';
				style[mxConstants.STYLE_FONTSTYLE] = '1';
				
				style[mxConstants.STYLE_SHADOW] = '0';
				style[mxConstants.STYLE_ROUNDED] = '0';
				style[mxConstants.STYLE_GLASS] = '0';
				
				style[mxConstants.STYLE_IMAGE] = '/Public/Js/mxgraph/images/dude3.png';
				style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
				style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
				style[mxConstants.STYLE_SPACING] = 8;

				// Sets the default style for edges
				style = graph.getStylesheet().getDefaultEdgeStyle();
				style[mxConstants.STYLE_ROUNDED] = true;
				style[mxConstants.STYLE_STROKEWIDTH] = 3;
				style[mxConstants.STYLE_EXIT_X] = 0.5; // center
				style[mxConstants.STYLE_EXIT_Y] = 1.0; // bottom
				style[mxConstants.STYLE_EXIT_PERIMETER] = 0; // disabled
				style[mxConstants.STYLE_ENTRY_X] = 0.5; // center
				style[mxConstants.STYLE_ENTRY_Y] = 0; // top
				style[mxConstants.STYLE_ENTRY_PERIMETER] = 0; // disabled
				
				// Disable the following for straight lines
				style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;

				// Stops editing on enter or escape keypress
				var keyHandler = new mxKeyHandler(graph);

				// Enables automatic layout on the graph and installs
				// a tree layout for all groups who's children are
				// being changed, added or removed.
				var layout = new mxCompactTreeLayout(graph, false);
				layout.useBoundingBox = false;
				layout.edgeRouting = false;
				layout.levelDistance = 60;
				layout.nodeDistance = 16;

				// Allows the layout to move cells even though cells
				// aren't movable in the graph
				layout.isVertexMovable = function(cell)
				{
					return true;
				};

				var layoutMgr = new mxLayoutManager(graph);

				layoutMgr.getLayout = function(cell)
				{
					if (cell.getChildCount() > 0)
					{
						return layout;
					}
				};

				// Installs a popupmenu handler using local function (see below).
				graph.panningHandler.factoryMethod = function(menu, cell, evt)
				{
					return createPopupMenu(graph, menu, cell, evt);
				};

				// Fix for wrong preferred size
				var oldGetPreferredSizeForCell = graph.getPreferredSizeForCell;
				graph.getPreferredSizeForCell = function(cell)
				{
					var result = oldGetPreferredSizeForCell.apply(this, arguments);

					if (result != null)
					{
						result.width = Math.max(120, result.width - 40);
					}

					return result;
				};

				// Gets the default parent for inserting new cells. This
				// is normally the first child of the root (ie. layer 0).
				var parent = graph.getDefaultParent();

				// Adds the root vertex of the tree
				graph.getModel().beginUpdate();
				try
				{
					var w = graph.container.offsetWidth;
					var v0 = graph.insertVertex(parent, 'id-0',
						'公司', w*0.5 - 30, 20, 140, 60, 'image=/Public/Js/mxgraph/images/house.png');
					graph.updateCellSize(v0);

					addOverlays(graph, v0, false);
					
					
					
					//在这里还原架构图
					<volist name="list" id="vo">
					   <eq name="vo['deep']" value="1">
					   
					   
					     var v{$vo.id} = addChild(graph, v0, '{$vo.name}', 'id-'+{$vo.id});
					   <else/>
					     var v{$vo.id} = addChild(graph, v{$vo.pid}, '{$vo.name}', 'id-'+{$vo.id});
					   </eq>
					</volist>
					
				}
				finally
				{
					// Updates the display
					graph.getModel().endUpdate();
				}

				var content = document.createElement('div');
				content.style.padding = '4px';

				var tb = new mxToolbar(content);

				tb.addItem('缩小', '/Public/Js/mxgraph/images/zoom_in32.png',function(evt)
				{
					graph.zoomIn();
				});

				tb.addItem('放大', '/Public/Js/mxgraph/images/zoom_out32.png',function(evt)
				{
					graph.zoomOut();
				});
				
				tb.addItem('原始大小', '/Public/Js/mxgraph/images/view_1_132.png',function(evt)
				{
					graph.zoomActual();
				});

				tb.addItem('打印', '/Public/Js/mxgraph/images/print32.png',function(evt)
				{
					var preview = new mxPrintPreview(graph, 1);
					preview.open();
				});

				/*tb.addItem('打印', 'images/press32.png',function(evt)
				{
					var pageCount = mxUtils.prompt('Enter maximum page count', '1');

					if (pageCount != null)
					{
						var scale = mxUtils.getScaleForPageCount(pageCount, graph);
						var preview = new mxPrintPreview(graph, scale);
						preview.open();
					}
				});*/

				wnd = new mxWindow('工具', content, $(document).width() - 350, 0, 150, 66, false);
				wnd.setMaximizable(false);
				wnd.setScrollable(false);
				wnd.setResizable(false);
				wnd.setVisible(true);
			}
		};

// Function to create the entries in the popupmenu
function createPopupMenu(graph, menu, cell, evt)
{
	var model = graph.getModel();

	if (cell != null)
	{
		//做增、删、改的权限筛选
		
		<if condition="getAccessMenu($accessList, 'Intesys', 'Member_position', 'insert')">
			if (model.isVertex(cell))
			{
				menu.addItem('增加子级', '/Public/Js/mxgraph/images/overlays/check.png', function()
				{
					$.post('{:U('insert')}', {pid:cell.id.split('-')[1], name:'双击修改'}, function(data){
						if(data.status == 1){
								addChild(graph, cell, '双击修改', 'id-'+data.id);
							}else{
								alert(data.info);
							}
						
					}, 'json');
				});
			}
		</if>
		<if condition="getAccessMenu($accessList, 'Intesys', 'Member_position', 'update')">
			menu.addItem('修改标签', '/Public/Js/mxgraph/images/text.gif', function()
			{
				graph.startEditingAtCell(cell);
			});
		</if>
		<if condition="false&&getAccessMenu($accessList, 'Intesys', 'Member_position', 'updateMember')">
			menu.addItem('修改管理员', '/Public/Js/mxgraph/images/text.gif', function(e)
			{
				_openWindow('{:U('Member_position/change')}&id=' + cell.id.substr(3),650,cell.value+' 的管理者选择','确定',function(e){
					$.ThinkBox.success('操作成功',{'delayClose':500});
				},'');
			});
		</if>
		<if condition="getAccessMenu($accessList, 'Intesys', 'Member_position', 'delete')">
			if (cell.id != 'treeRoot' &&
				model.isVertex(cell))
			{
				menu.addItem('删除', '/Public/Js/mxgraph/images/delete.gif', function()
				{
				
					deleteSubtree(graph, cell);
					
					
					
				});
			}
		</if>
		menu.addSeparator();
	}

	/*menu.addItem('Fit', '/Public/Js/mxgraph/images/zoom.gif', function()
	{
		graph.fit();
	});*/

	/*menu.addItem('Actual', '/Public/Js/mxgraph/images/zoomactual.gif', function()
	{
		graph.zoomActual();
	});

	menu.addSeparator();

	menu.addItem('Print', '/Public/Js/mxgraph/images/print.gif', function()
	{
		var preview = new mxPrintPreview(graph, 1);
		preview.open();
	});

	menu.addItem('Poster Print', '/Public/Js/mxgraph/images/print.gif', function()
	{
		var pageCount = mxUtils.prompt('Enter maximum page count', '1');

		if (pageCount != null)
		{
			var scale = mxUtils.getScaleForPageCount(pageCount, graph);
			var preview = new mxPrintPreview(graph, scale);
			preview.open();
		}
	});*/
};

function addOverlays(graph, cell, addDeleteIcon)
{
	<if condition="getAccessMenu($accessList, 'Intesys', 'Member_position', 'update')">
		//修改名称
		graph.labelChanged = function(cell, newValue, trigger)  
		{
			
			
			//更新当前标签
			$.post('{:U('update')}', {id:cell.id.split('-')[1], name:newValue}, function(data){
				if(data.status == 1){
					
				}else{
					alert(data.info);
				}
			}, 'json');
			mxGraph.prototype.labelChanged.apply(this, arguments);
		};
	</if>
	
	<if condition="getAccessMenu($accessList, 'Intesys', 'Member_position', 'insert')">
		var mximages = new mxImage('/Public/Js/mxgraph/images/add.png', 24, 24);
		var overlay = new mxCellOverlay(mximages, '增加下级');
		overlay.cursor = 'hand';
		overlay.align = mxConstants.ALIGN_CENTER;
		
		
	
		overlay.addListener(mxEvent.CLICK, mxUtils.bind(this, function(sender, evt)
		{
			$.post('{:U('insert')}', {pid:cell.id.split('-')[1], name:'双击修改'}, function(data){
				if(data.status == 1){
						addChild(graph, cell, '双击修改', 'id-'+data.id);
					}else{
						alert(data.info);
					}
				
			}, 'json');
		}));
		graph.addCellOverlay(cell, overlay);
	</if>
	<if condition="getAccessMenu($accessList, 'Intesys', 'Member_position', 'delete')">
		if (addDeleteIcon)
		{
			overlay = new mxCellOverlay(new mxImage('/Public/Js/mxgraph/images/close.png', 30, 30), '删除');
			overlay.cursor = 'hand';
			overlay.offset = new mxPoint(-4, 8);
			overlay.align = mxConstants.ALIGN_RIGHT;
			overlay.verticalAlign = mxConstants.ALIGN_TOP;
			overlay.addListener(mxEvent.CLICK, mxUtils.bind(this, function(sender, evt)
			{
				
				
				if(!confirm('确定删除吗？')){
					return false;
				}
				
				deleteSubtree(graph, cell);
				
				/*$.get('{:U('delete')}', {id:cell.id.split('-')[1]}, function(data){
					if(data.status == 1){
					}else{
						alert(data.info);
					}
					
				}, 'json');*/
	
			}));
		
			graph.addCellOverlay(cell, overlay);
		}
	</if>
};

function addChild(graph, cell, lebalname, id)
{
	var model = graph.getModel();
	var parent = graph.getDefaultParent();
	var vertex;

	model.beginUpdate();
	try
	{
		vertex = graph.insertVertex(parent, id, lebalname);
		var geometry = model.getGeometry(vertex);
//alert(graph.getTextContent());
		// Updates the geometry of the vertex with the
		// preferred size computed in the graph
		var size = graph.getPreferredSizeForCell(vertex);
		geometry.width = size.width;
		geometry.height = size.height;

		// Adds the edge between the existing cell
		// and the new vertex and executes the
		// automatic layout on the parent
		var edge = graph.insertEdge(parent, null, '', cell, vertex);

		// Configures the edge label "in-place" to reside
		// at the end of the edge (x = 1) and with an offset
		// of 20 pixels in negative, vertical direction.
		edge.geometry.x = 1;
		edge.geometry.y = 0;
		edge.geometry.offset = new mxPoint(0, -20);

		addOverlays(graph, vertex, true);
	}
	finally
	{
		model.endUpdate();
	}
	
	return vertex;
};


function deleteSubtree(graph, cell)
{	
	// Gets the subtree from cell downwards
	var cells = [];
	var res=1;

	
		$.getJSON('{:U('delete')}',{id:cell.id.split('-')[1]},function(e){
		if(e.status==0){
		    res=e.status;	
			alert(e.info);
			return false;
		}
		cells.push(cell);
		if(res!=0){
			
	     graph.removeCells(cells);
			}
  		});
			
	

};
	</script>
    </head>

    <!-- Calls the main function after the page has loaded. Container is dynamically created. -->
    <body onload="main();">

    <!-- Creates a container for the outline -->
    <div id="outlineContainer"
		style="z-index:1;position:absolute;overflow:hidden;top:0px;right:0px;width:160px;height:120px;background:transparent;border-style:solid;border-color:lightgray;">
    </div>
    <span data-step="1" data-intro="欢迎来到新版Jeff的阳台！<p>下面为你介绍一下新版面特征。</p><p>键盘快捷键：&rarr;</p>" data-position='bottom'></span>
    <span data-step="2" data-intro="欢迎来到新版Jeff的阳台！<p>下面为你介绍一下新版面特征。</p><p>键盘快捷键：&rarr;</p>" data-position='bottom'></span>
    <span data-step="3" data-intro="欢迎来到新版Jeff的阳台！<p>下面为你介绍一下新版面特征。</p><p>键盘快捷键：&rarr;</p>" data-position='bottom'></span>
    <empty name="list">
        
        <!--<script type="text/javascript">introJs().setOptions({'prevLabel':'&larr; 上一步','nextLabel':'下一步 &rarr;','skipLabel':'跳过','doneLabel':'完成'}).start();</script>-->
        
    </empty>
    </body>
</html>
